<template>
  <div class="coursedetails">
    <section class="show-content">
      <img :src="curriculumData.cover">
    </section>
    <section class="class-title-box">
      <p class="title">{{curriculumData.title}}</p>
      <div class="class-about">
        <span>共计{{curriculumData.snumber}}课节</span>
        <span>{{curriculumData.snumber}}次学习</span>
      </div>
    </section>
    <section
      class="teacher-content"
      v-if="lecturer_list !== ''"
    >
      <div class="teacher-avatar">
        <img :src="lecturer_list.lecturer.img">
      </div>
      <div class="teacher-about">
        <p>{{lecturer_list.lecturer.name}}</p>
        <section class="about-bottom">
          <span><span class="teacher-about-number">{{lecturer_list.curriculum_count}}</span>课程数</span>
          <span><span class="teacher-about-number">{{lecturer_list.follow_count}}</span>关注数</span>
          <div
            class="follow-btn"
            @click="fllowClick(0)"
            v-if="lecturer_list.follow == '0'"
          >关注</div>
          <div
            class="follow-btn"
            v-else
            @click="fllowClick(1)"
          >已关注</div>
        </section>
      </div>
    </section>
    <section class="info_tab_boxs">
      <section :class=" positionStyle === true ? 'pos sp_tab_select1' : 'sp_tab_select1'">
        <tab
          :line-width="2"
          custom-bar-width="30px"
        >
          <tab-item
            selected
            @on-item-click="tabcontainer = 0"
          >课程介绍</tab-item>
          <tab-item @on-item-click="tabcontainer = 1">课程列表</tab-item>
          <tab-item @on-item-click="tabcontainer = 2">用户评价 <span style="color:#f29911;font-family: PingFangSC-Medium;">{{evaluate.count}}</span></tab-item>
        </tab>
      </section>
    </section>
    <div style="width:100%;height:44px;"></div>
    <section
      class="tabcontainer"
      v-if="tabcontainer === 0"
    >
      <div
        v-if="curriculumData !=='' "
        v-html="curriculumData.introduction"
        class="curriculum-introduce"
        ref="introduce"
      ></div>
      <div
        @click="opentanchuang"
        style="margin: 10px 0px; text-align: center; width: 100%; font-size: 14px; color:#f29911"
      >购买须知</div>
      <div
        class="currency_title_Label"
        style="font-size: 16px;"
      >猜你喜欢</div>
      <div class="sp_zero_list">
        <Recommend
          :type='Recommend_list'
          @curriculumId='curriculumId'
        ></Recommend>
      </div>
    </section>
    <section v-if="tabcontainer === 1">
      <div
        v-for="(item,index) in ChapterList"
        :key="index"
        class="liebiao_item"
      >
        <div @click="gochapter(item,index)">
          <div v-if="item.is_status == 0">
            <div
              v-if="item.audition == 1 && curriculumData.category == 1"
              class="try-look"
            >试听</div>
            <div
              v-if="item.audition == 1&& curriculumData.category != 1"
              class="try-look"
            >试看</div>
            <div
              v-if="item.audition == 2 && item.is_sell == 0"
              class="suotou"
            >
              <img src="http://o6wndwjxn.qnssl.com/6096b201904091026454133.png">
            </div>
            <div
              v-if="item.audition == 2 && item.is_sell == 1"
              class="suotou"
            >
              <span style="color: #fd5e5e;font-size: 15px;">￥{{item.preferential_money / 100 }}</span>
            </div>
          </div>
          <div :class="  item.audition == 1 ? 'fontcolor zuil' : 'zuil'">
            {{item.title}}{{item.audition}}{{item.is_sell}}
            <div class="create_time">
              {{item.create_time}}
            </div>
          </div>
        </div>
      </div>
    </section>
    <section v-if="tabcontainer === 2">
      <div v-if="evaluate.count > 0">
        <div class="count-fen">
          <div class="count-left">
            <div class="color-size">{{evaluate.fen.score}}分</div>
            <div class="star"><img :src="evaluate.fen.scoreImg"></div>
            <div>{{evaluate.fen.txt}}</div>
          </div>
          <div class="count-right">
            <div>
              <span>讲师专业</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree1 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>方法有效</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree2 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>逻辑清晰</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree3 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>声音画质</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree4 / 5) * 100 +'%;'"></span>
              </span>
            </div>
            <div>
              <span>课程服务</span>
              <span class="bar">
                <span :style="'width:'+ (evaluate.fen.degree5 / 5) * 100 +'%;'"></span>
              </span>
            </div>
          </div>
        </div>
        <evaluationlist
          v-for="(item,index) in evaluate.data"
          :key="index"
          :item="item"
        ></evaluationlist>
      </div>
      <div v-else>
        暂无评价
      </div>
    </section>
    <popup
      v-if="is_gz !== '' && curriculumId !== ''&& lecturer_list !== ''"
      :is_collection="is_gz === 1 ?'yes' : 'no'"
      :lecturer_id="lecturer_list.lecturer.lecturer_id "
      v-on:openPresentationCourse="openPresentationCourse"
      v-on:collectionCourse="collectionCourse"
      :curriculum_id="curriculumId"
      ref="popup"
    ></popup>
    <presentation-course
      ref="gis"
      :curriculum="curriculumData"
      v-on:giveCourse="giveCourse"
    ></presentation-course>
    <div class="btn-container">
      <div
        @click="gochapterbtn"
        class="buy-btn"
        v-if="is_sin === 1"
      >进入课程</div>
      <div
        class="buy-btn"
        v-else
        @click="paymentPopup = true"
      >
        立即学习￥{{curriculumData.preferential_money}}
        <span class="buy-del">￥{{curriculumData.money}}</span>
      </div>
    </div>
    <!-- 购买提示 -->
    <div
      class="purchase_Popup"
      v-show="paymentPopup"
      @click.self="paymentPopup = false"
    >
      <div class="purchase_Popup_box">
        <div class="purchase_Popup_title">付费详情</div>
        <div class="purchase_Popup_content">
          <!-- 原价 -->
          <div class="purchase_Popup_item">
            <div>课程原价</div>
            <div><span class="pu_yuan_money">¥{{curriculumData.money}}</span></div>
          </div>
          <!-- 优惠价 -->
          <div class="purchase_Popup_item">
            <div>课程现价</div>
            <div>¥{{curriculumData.preferential_money}}</div>
          </div>
          <!-- 优惠券 -->
          <div
            class="purchase_Popup_item"
            v-if="coupons != '' && coupons !== null"
          >
            <div>优惠券</div>
            <div>-¥{{discount}}</div>
          </div>
        </div>
        <div class="purchase_Popup_button" @click="co_payment">
          <div>立即付款
            <span>¥{{(curriculumData.preferential_money * 100 - discount * 100) / 100 }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 推广 -->
    <PurchaseInstructions ref="Instructions">
      <div slot="title">
        <span style="font-family: PingFangSC-Medium;
font-size: 18px;
color: #333333;
letter-spacing: 0.58px;">购买须知</span>
      </div>
      <div
        slot="content"
        class="ppp-sss"
      >
        <p>
          1、该课程为付费系列课程，按课程计划定期更新，每节课可在教师开课后学习，
          也可免费回听。
        </p>
        <p>2、购买课程后，可登录微信服务号“知运”，点击“我的课程”——“已购课
          程”进入听课。</p>
        <p>3、该课程为虚拟内容服务，购买成功后概不退款，敬请谅解。</p>
        <p>4、如果在使用过程中产生问题，可以点击“个人中心”——“在线客服”进行
          咨询。</p>

      </div>
    </PurchaseInstructions>
  </div>
</template>

<script>
import {
  Tab,
  TabItem
} from 'vux'
import {
  books_list,
  school_number,
  books_chapter,
  comments_show,
  give,
  follow_lecturer,
  search_popularity,
  by_curriculum
} from '@/api/coursedetails'
import PurchaseInstructions from '@/components/public/PurchaseInstructions'
import presentationCourse from '@/components/public/presentationcourse'
import starRating from '@/utils/starrating'
import popup from '@/components/public/popup'
import suctionTops from '@/utils/suctiontop'
import Recommend from '@/components/curriculum/Recommend.vue'
import evaluationlist from '@/components/public/evaluationlist'
import { mapState } from 'vuex'
import wxPay from '@/utils/wxpay'
export default {
  components: {
    presentationCourse,
    Tab,
    TabItem,
    popup,
    evaluationlist,
    PurchaseInstructions,
    Recommend
  },
  data () {
    return {
      Recommend_list: [],
      sp_Discount: '',
      fenxiang: '',
      f_money: '',
      discount: 0,
      coupons: '',
      paymentPopup: false,
      is_sin: '',
      curriculumId: 4145,
      curriculumData: '',
      lecturer_list: '',
      tabcontainer: 0,
      ChapterList: '',
      evaluate: '',
      is_gz: '',
      positionStyle: false
    }
  },
  updated () {
    this.$nextTick(function () {
      if (this.$refs.introduce) {
        // 在下次 DOM 更新循环结束之后执行这个回调。在修改数据之后立即使用这个方法，获取更新后的DOM.
        let dom = this.$refs.introduce
        let imgs = dom.getElementsByTagName('img')
        for (let i = 0; i < imgs.length; i++) {
          imgs[i].style.width = '100%'
        }
      }
    })
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  created () {
    if (this.$route.query.cid) {
      this.fenxiang = JSON.parse(this.$route.query.cid)
      this.curriculumId = this.fenxiang.curriculum_id
      this.shareid = this.fenxiang.shareid
    } else {
      // this.curriculumId = this.$route.query.curriculum_id
    }
    if (this.$store.state._go !== '') {
      // 判断是否评论过
      alert(123321)
    }
    this.getCurriculum()
  },
  mounted () {
    this.$nextTick(() => {
      window.addEventListener('scroll', this.suctiontop)
      window.addEventListener('scroll', this.addscroll)
    })
  },
  beforeDestroyed () {
    window.removeEventListener('scroll', this.suctiontop)
    window.removeEventListener('scroll', this.addscroll)
  },
  methods: {
    // 付款按钮
    co_payment () {
      this.purchase_Popup = false
      // 判断上级id 没有返回0
      var that = this
      let params = {
        app_id: that.app_id,
        user_id: that.user_id,
        curriculum_id: this.cid,
        url_id: this.shareid,
        chapter_id: 0
      }
      by_curriculum(params).then(res => {
        this.purchase_Popup = false
        let { code, data, msg } = res.data
        // console.log('接口返回数据', data)
        if (code === 200) {
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',
            {
              appId: data.appId, // 公众号名称，由商户传入
              timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
              nonceStr: data.nonceStr, // 随机串
              package: data.package,
              signType: data.signType, // 微信签名方式：
              paySign: data.paySign // 微信签名
            },
            function (res) {
              // console.log('res', res)
              if (res.err_msg == 'get_brand_wcpay_request:ok') {
                that.purchase_Popup = false
                that.is_sin = 1
                that.getCurriculum()
              }
            }
          )
        } else {
          alert(msg)
        }
      })
    },
    // 猜你喜欢
    getRecommend () {
      search_popularity().then(res => {
        let { code, data } = res.data
        if (code === 200) {
          this.Recommend_list = data
        }
      })
    },
    // 按钮点击进入课程
    gochapterbtn () {
      this.gochapter(this.ChapterList[0], 0)
    },
    // 弹窗支付弹窗
    opentanchuang () {
      this.$refs.Instructions.ava = true
    },
    // 跳转到课程章节
    gochapter (item, index) {
      // 判断是否评论过此课程
      if (this.is_c === 0) {
        this.$store.commit('_go', this.curriculumId)
      }
      if (((item.is_status === 1 || item.audition === '1') && item.is_sell === '0') === true || this.is_sin === 1) {
        if (this.curriculumData.category === '3') {
          this.$router.push({
            path: 'co_video',
            query: {
              curriculum_id: this.curriculumId,
              chapter_id: item.chapter_id,
              c: index
            }
          })
        } else if (this.curriculumData.category === '1') {
          this.$router.push({
            path: '/co_audio',
            query: {
              curriculum_id: this.curriculumId,
              chapter_id: item.chapter_id,
              c: index
            }
          })
        } else if (this.curriculumData.category === '2') {
          this.$router.push({
            path: '/co_text',
            query: {
              curriculum_id: this.curriculumId,
              chapter_id: item.chapter_id,
              c: index
            }
          })
        }
      } else if (item.is_sell === '1' && item.is_status === '0') {
        if (window.__wxjs_is_wkwebview !== true) {
          this.$router.push({
            path: '/danzhangxiangqing',
            query: {
              curriculum_id: this.curriculumId,
              chapter_id: item.chapter_id
            }
          })
        } else {
          window.location.href = `/danzhangxiangqing?chapter_id=${item.chapter_id}&curriculum_id=${this.curriculumId}`
        }
      }
    },
    // 吸顶
    suctiontop () {
      this.positionStyle = suctionTops('.info_tab_boxs')
    },
    // 关注老师
    fllowClick (e) {
      this.sp_follow_status = e
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        lecturer_id: this.lecturer_list.lecturer.lecturer_id
      }

      follow_lecturer(requery).then(res => {
        let { code, data } = res.data
        if (code === 200) {
          console.log(data)
          if (e === 0) {
            this.lecturer_list.follow = 1
            this.lecturer_list.follow_count++
          } else {
            this.lecturer_list.follow = 0
            this.lecturer_list.follow_count--
          }
        }
      })
    },
    // 赠送弹窗付费
    giveCourse (num) {
      let obj = {
        number: num,
        user_id: this.user_id,
        curriculum_id: this.curriculumId,
        url_id: 0
      }
      give(obj).then(res => {
        if (res.data.code === 200) {
          wxPay(res).then(data => {
            // this.getDetails()
            if (window.__wxjs_is_wkwebview !== true) {
              this.$router.push({
                path: '/give',
                query: {
                  num: num,
                  curriculum_id: this.cid,
                  cover: this.cover,
                  title: this.title
                }
              })
            } else {
              window.location.href = `/give?num=${num}&curriculum_id=${this.cid}&cover=${this.cover}&title=${this.title}`
            }
          })
        }
      })
    },
    // 赠送课程弹窗
    openPresentationCourse () {
      this.$refs.gis.state = true
    },
    // 点击量
    xuexi () {
      let prams = {
        curriculum_id: this.curriculumId
      }
      school_number(prams).then(res => {
        let { code, data } = res.data
        if (code === 200) {
          this.number = data
        }
      })
    },
    // 课程评价列表
    commentsShow () {
      let obj = {
        curriculum_id: this.curriculumId
      }
      comments_show(obj).then(res => {
        if (res.data.code === 200) {
          res.data.data.data.forEach((element, i) => {
            element = Object.assign(element, starRating(element.score))
          })
          res.data.data.fen = Object.assign(res.data.data.fen, starRating(res.data.data.fen.score))
          this.evaluate = res.data.data
        }
      })
    },
    // 章节列表
    getChapterList () {
      let params = {
        curriculum_id: this.curriculumId,
        user_id: this.user_id
      }
      books_chapter(params).then(res => {
        let { code, data, msg } = res.data
        if (code === 200) {
          this.ChapterList = data
        } else {
          alert(msg)
        }
      })
    },
    // 收藏功能
    collectionCourse (res) {
      if (res) {
        this.getCurriculum()
      }
    },
    // 课程详情
    getCurriculum () {
      let prams = {
        user_id: this.user_id,
        curriculum_id: this.curriculumId,
        type: 0
      }
      books_list(prams).then(res => {
        let { code, data, msg } = res.data
        if (code === 200) {
          this.curriculumData = data.data
          this.curriculumData.preferential_money = this.curriculumData.preferential_money / 100
          this.curriculumData.money = this.curriculumData.money / 100
          this.coupons = data.coupons
          this.f_money = data.f_money
          this.is_c = data.is_c
          this.is_gz = data.is_gz
          this.is_sin = data.is_sin
          this.is_type = data.is_type
          this.lecturer_list = data.lecturer_list
          this.st = data.st
          if (data.f_money !== 0) {
            this.sp_share_mongy = true
            this.sp_Discount = data.f_money
          } else {
            this.sp_share_mongy = false
            this.sp_Discount = 0
          }
          this.getChapterList()
          this.commentsShow()
          this.xuexi()
        } else {
          alert(msg)
        }
        this.$store.commit('updateLoadingStatus', { isLoading: false })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.curriculum-introduce > img {
  width: 100%;
}
// 购买弹窗
.purchase_Popup {
  position: fixed;
  z-index: 500;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
}
.purchase_Popup_box {
  width: 100vw;
  height: 60vh;
  position: absolute;
  left: 0;
  bottom: 0;
  background: white;
  border-radius: 10px 10px 0 0;
}
.purchase_Popup_title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #1a1a1a;
  text-align: center;
  font-weight: bold;
}
.purchase_Popup_item {
  width: 90vw;
  margin: 0 5vw;
  height: 35px;
  line-height: 35px;
  display: flex;
}
.purchase_Popup_item > div {
  flex: 1;
  color: #fd5e5e;
  font-size: 15px;
}
.purchase_Popup_item > div:nth-child(1) {
  color: #1a1a1a;
}
.purchase_Popup_item > div:nth-child(2) {
  text-align: right;
}

.purchase_Popup_item:nth-child(1) > div:nth-child(2) {
  color: #999999;
}
.purchase_Popup_button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  overflow: hidden;
}
.purchase_Popup_button > div {
  width: 90%;
  margin: 5px 5%;
  height: 40px;
  line-height: 40px;
  background: #f29911;
  color: white;
  text-align: center;
  border-radius: 500px;
  font-size: 15px;
}
.purchase_Popup_button > div span {
  font-size: 12px;
}
.pu_yuan_money {
  position: relative;
  display: inline-block;
}
.pu_yuan_money:after {
  position: absolute;
  content: "";
  left: -10%;
  top: 49%;
  width: 120%;
  height: 1px;
  z-index: 1;
  background: #999999;
}

// 购买按钮相关
.btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 14px;
  color: white;
  background: white;
  border-radius: 5px 5px 0 0;
  .buy-btn {
    width: 90%;
    height: 40px;
    margin: 5px 5%;
    background: #f29911;
    line-height: 40px;
    border-radius: 500px;
  }
  .buy-del {
    text-decoration: line-through;
    color: rgb(204, 204, 204);
    font-size: 12px;
  }
}
.info_tab_boxs /deep/ .vux-tab-selected {
  position: relative;
}

.info_tab_boxs /deep/ .vux-tab-bar-inner {
  position: relative;
}

.info_tab_boxs {
  position: relative;
}
.coursedetails {
  font-family: PingFangSC-Regular;
  padding-bottom: 50px;
}
.show-content {
  width: 100%;
  height: 230px;
  background-color: #fcc;
  img {
    width: 100%;
    height: 100%;
  }
}
.class-title-box {
  width: 100%;
  height: 90px;
  position: relative;
  border-bottom: 10px solid #f0f0f0;
  padding: 15px;
  box-sizing: border-box;
  .title {
    font-size: 15px;
    color: #1a1a1a;
    font-weight: bold;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* -webkit-box-orient: vertical; */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .class-about {
    font-size: 12px;
    color: #999999;
    margin-top: 10px;
    span {
      display: inline-block;
    }
    span:nth-of-type(2) {
      margin-left: 15px;
    }
  }
}
// 评价相关
.count-fen {
  width: 100%;
  height: 100px;
  padding: 0 5%;
  display: flex;
  box-sizing: border-box;
  margin: 10px 0px;

  .count-left {
    flex: 2;
    border-right: 1px solid #eeeeee;
    text-align: center;

    .color-size {
      font-size: 24px;
      color: #ff9300;
      margin-top: 6px;
    }

    .star {
      width: 100%;
      height: 15px;
      margin: 10px 0;

      img {
        width: 100%;
        height: 100%;
      }
    }

    div:last-of-type {
      font-size: 14px;
      color: #1a1a1a;
    }
  }

  .count-right {
    flex: 3;

    div {
      font-size: 12px;
      color: #999999;
      margin: 3px 0;
      display: flex;
      align-items: center;

      span:first-of-type {
        text-indent: 19px;
        margin-right: 20px;
      }

      .bar {
        position: relative;
        display: inline-block;
        width: 55%;
        height: 5px;
        background: #eeeeee;
        border-radius: 50px;
        overflow: hidden;

        span {
          display: inline-block;
          position: absolute;
          height: 100%;
          background: #ff9300;
          border-radius: 50px;
        }
      }
    }
  }
}
// 老师相关css
.teacher-content {
  width: 100%;
  height: 76px;
  padding: 0px 5%;
  display: flex;
  align-items: center;
  border-bottom: solid 10px #f0f0f0;
  .teacher-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background-color: aqua;
    margin-right: 16px;
  }
  .teacher-about {
    flex: 1;
    height: 50px;
    position: relative;
    p {
      color: #1a1a1a;
      font-size: 15px;
      font-weight: bold;
    }
    .about-bottom {
      margin-top: 3px;
      font-size: 12px;
      color: #999999;
      span {
        display: inline-block;
        .teacher-about-number {
          font-size: 12px;
          color: #1a1a1a;
        }
      }
      span:nth-of-type(2) {
        margin-left: 10px;
      }
    }
    .follow-btn {
      width: calc(100vw * 140 / 750);
      height: calc(100vw * 54 / 750);
      line-height: calc(100vw * 54 / 750);
      background: #f29911;
      color: white;
      font-size: 15px;
      text-align: center;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
    }
  }
}
.tabcontainer {
  width: 90%;
  margin: 0 5%;
  .curriculum-introduce {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    img {
      width: 100%;
    }
  }
}
.try-look {
  display: inline-block;
  font-size: 10px;
  color: #ffffff;
  border-radius: 2px;
  background: #f39800;
  width: calc(100vw * 80 / 750);
  text-align: center;
  height: calc(100vw * 40 / 750);
  line-height: calc(100vw * 40 / 750);
  margin-right: calc(100vw * 20 / 750);
}
.suotou {
  width: calc(100vw * 80 / 750);
  height: calc(100vw * 40 / 750);
  margin-right: calc(100vw * 20 / 750);
  text-align: center;
}
.suotou > img {
  height: calc(100vw * 41 / 750);
  width: calc(100vw * 42 / 750);
}
.fontcolor {
  position: relative;
}
.create_time {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 28 / 750);
  color: #999999;
  letter-spacing: 0;
  position: absolute;
  bottom: 0;
}
.liebiao_item {
  width: 90%;
  margin: calc(100vw * 20 / 750) 5% 0 5%;
}

.liebiao_item > div div:nth-child(2) {
  font-size: calc(100vw * 28 / 750);
  color: #333;
  height: 100%;
  flex: 1;
}
.liebiao_item > div div:nth-child(2) span {
  display: inline-block;
  margin-left: 15px;
}

.liebiao_item > div {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(100vw * 122 / 750);
}
.zuil {
  font-family: PingFangSC-Medium;
  font-size: 15px;
  color: #333333;
  letter-spacing: 0;
  height: 100%;
  flex: 1;
}
.sp_tab_select1 {
  width: 100%;
  z-index: 100;
  position: absolute;
}
.sp_tab_select1 {
  width: 100%;
  z-index: 100;
  position: absolute;
}
.pos {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
}
</style>
